
<!--------------------------------------------焦子鉴------------------------------------------------------------------>
<template>
<el-mainer>  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	  <el-select v-model="ruleForm.distributecentre" placeholder="请选择分公司">
	    <el-option label="华北" value="shanghai"></el-option>
	    <el-option label="华中" value="beijing"></el-option>
	    <el-option label="华南" value="beijing"></el-option>
	  </el-select>
      <el-form-item label="岗位名称" prop="storage">
          <el-input v-model="ruleForm.storage"></el-input>
      </el-form-item>
      <el-form-item label="变更人" prop="weight">
          <el-input v-model="ruleForm.weight"></el-input>
      </el-form-item>
      <el-form-item label="变更时间" prop="volume">
          <el-input v-model="ruleForm.volume"></el-input>
      </el-form-item>
      <el-form-item label="至" prop="number">
          <el-input v-model="ruleForm.number"></el-input>
      </el-form-item>

    <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
        <el-button @click="resetForm('ruleForm')">新建</el-button>
    </el-form-item>
  </el-form>


  <el-table
    :data="tableData"
    :cell-style="centerMov"
    :header-cell-style="centerMov"
	stripe
    style="width: 80%">

    <el-table-column
      :cell-style="centerMov"
      label="序号"
      width="200%">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>序号: {{ scope.row.num }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.num }}</el-tag>
          </div>
        </el-popover>
      </template>
      </el-table-column>
	<el-table-column
      :cell-style="centerMov"
      label="岗位名称"
      width="200%">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>岗位名称: {{ scope.row.work }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.work }}</el-tag>
          </div>
        </el-popover>
      </template>
      </el-table-column>
      <el-table-column
        :cell-style="centerMov"
        label="所属分公司"
        width="200%">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>所属分公司: {{ scope.row.comp }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.comp }}</el-tag>
            </div>
          </el-popover>
        </template>
		</el-table-column>
		<el-table-column
          :cell-style="centerMov"
          label="变更人"
          width="200%">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>变更人: {{ scope.row.change }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.change }}</el-tag>
              </div>
            </el-popover>
          </template>
    </el-table-column>
	<el-table-column
		:cell-style="centerMov"
		label="日期"
		width="200%">
		<template slot-scope="scope">
		<i class="el-icon-time"></i>
		<span style="margin-left: 10px">{{ scope.row.date }}</span>
		</template>
	</el-table-column><div>tts</div>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
		<el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  
<el-pagination
    background
    layout="prev, pager, next"
    :total="1000">
</el-pagination>


</el-mainer>
</template>
<script>
    export default {
        data() {
            return {
                /*定义表单返回对象ruleForm*/
                ruleForm: {
                    distributecentre: '',
                    storage: '',
                    weight: '',
                    volume: '',
                    number:'',

                },
				tableData: [{
				num: '1',
				work: '华北调度岗',
				comp: '华北',
				date: '2016-05-02',
				name: '王小虎',
				change: 'bjwangyi'
				},{
				num: '2',
				work: '华南调度岗',
				comp: '华南',
				date: '2016-05-02',
				name: '王小虎',
				change: 'bjwangyi'
				},{
				num: '3',
				work: '华北调度岗',
				comp: '华北',
				date: '2016-05-02',
				name: '王小虎',
				change: 'bjwangyi'
				},{
				num: '4',
				work: '华中调度岗',
				comp: '华中',
				date: '2016-05-02',
				name: '王小虎',
				change: 'bjwangyi'
				}],
                /*校验规则*/
                rules: {
                    distributecentre: [
                        { required: true, message: '请输入配送中心', trigger: 'blur' },

                    ],
                    storage: [
                        { required: true, message: '请输入库房', trigger: 'blur' }
                    ],
                    weight: [
                        { required: true, message: '请输入重量', trigger: 'blur' },
                        {type:'number',message:'请输入数字',trigger:'blur'}
                    ],
                    volume: [
                        { required: true, message: '请输入体积', trigger: 'blur' },
                        {type:'number',message:'请输入数字',trigger:'blur'}
                    ],
                    number: [
                        { required: true, message: '请输入数量', trigger: 'blur' },
                        {type:'number',message:'请输入数字',trigger:'blur'}
                    ],

                }
            };
        },
        methods: {
            test(){
                console.log(this.ruleForm)
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                        /*在此验证成功，将数据给后台*/
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
			handleEdit(index, row) {
			    console.log(index, row);
			  },
			  handleDelete(index, row) {
			    console.log(index, row);
			  },
			  centerMov(){
			    return 'text-align: center'
			}
        }
    }
</script>